import React, { useState } from "react"
import { Menu } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { GROUP_NEW, GROUP_FIRST_ROUND, GROUP_SECOND_ROUND, GROUP_DELETED, GROUP_SUBMIT } from '../contants.js'
import { putGroup } from "../redux/reducers.js"

const { SubMenu } = Menu;

function SideMenu(props){
  const currentGroup = useSelector(state => state.job.group)
  const jobList = useSelector(state => state.job.dataListFiltered)
  const dispatch = useDispatch()

  const getCount = (group) => {
    const count = jobList.filter(item => item['group'] == group).length
    return count ? <span>({count})</span> : null
  }

  return (<Menu
    onClick={({key})=>{
      console.log(key, window.location.pathname)
      dispatch(putGroup(key))           
    }}
    style={{
      width: 200,
    }}
    defaultOpenKeys={['inbox']}
    selectedKeys={[currentGroup]}
    mode="inline"
  >
    <SubMenu key="inbox" title="收件箱">
      <Menu.Item key={GROUP_NEW}>
        <Link to="/jobList/new">未处理{getCount(GROUP_NEW)}</Link>
      </Menu.Item>
      <Menu.Item key={GROUP_FIRST_ROUND}>
        <Link to="/jobList/firstRound">已处理{getCount(GROUP_FIRST_ROUND)}</Link>
      </Menu.Item>
    </SubMenu>
    <SubMenu key="cat" title="分类箱">
      <Menu.Item key="E">
        <Link to="/jobList/target">全部</Link>
      </Menu.Item>
      <Menu.Item key="D">
        <Link to="/jobList/target?targetGroup=女装类">女装类</Link>
      </Menu.Item>
      <Menu.Item key="A">
        <Link to="/jobList/target?targetGroup=食品类">食品滋补类</Link>
      </Menu.Item>
      <Menu.Item key="B">
        <Link to="/jobList/target?targetGroup=厨卫类">厨卫百货类</Link>
      </Menu.Item>
      <Menu.Item key="C">
        <Link to="/jobList/target?targetGroup=新尝试">其他感兴趣</Link>
      </Menu.Item>

    </SubMenu>
    {/* <Menu.Item key={GROUP_SECOND_ROUND}>
      <Link to="/jobList/secondRound">类目数据{getCount(GROUP_SECOND_ROUND)}</Link>
    </Menu.Item> */}
    {/* <Menu.Item key={GROUP_SUBMIT}>
      <Link to="/jobList/submit"><span>已投递{getCount(GROUP_SUBMIT)}</span></Link>
    </Menu.Item> */}
    <Menu.Item key={GROUP_DELETED}>
      <Link to="/jobList/deleted"><span style={{color:'red'}}>已删除{getCount(GROUP_DELETED)}</span></Link>
    </Menu.Item>
  </Menu>)
}

export default SideMenu
